
/**
 * Created by ting.zhang on 2020/01/20.
 */
import React from 'react';
import { connect } from 'react-redux';
import { Tooltip, Popover } from 'antd';
import { messages } from 'share/common';
import moment from 'moment';
import trafficLineImg from 'images/request/travel/traffic_line.png';

class ZxTicketInfo extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isLoading: false,
    };
  }

  //初始化编辑数据
  componentWillReceiveProps(){
  }

  componentWillMount(){
  }

  showDetailInfo = () => {
    console.log('---showDetailInfo-----');
  };

  render() {
    const {ticketInfo, withTax} = this.props;
    const {journeys} = ticketInfo;
    if(journeys && journeys.length) {
      const journeyObj = journeys[0];
      for (var key in journeyObj) {
        ticketInfo[key] = journeyObj[key];
      }
    }
    let {planeModel, cabinClassName, discount, isMeal, arrivalDate, departureDate, subOrderTotalAmount, minPrice,
      ticketPrice, supplierServiceFee, totalTax, airportFee, fuelFee, airlineName, flightNo, departureAirportName, departureTerminal,
      arrivalAirportName, arrivalTerminal} = ticketInfo;
    let moneyStr = this.filterMoney(subOrderTotalAmount);
    let priceStr = this.filterMoney(minPrice || 0);
    let airlineInfos = [];
    planeModel && airlineInfos.push(planeModel);
    cabinClassName && airlineInfos.push(`${cabinClassName} ${messages('zx.discount', {n:discount, cm: '{n}折'})}`);
    (isMeal === 'true' || isMeal === true) && airlineInfos.push(messages('zx.has.food', {cm: '有餐食'}));
    airlineInfos = airlineInfos.join(' | ');
    const during = moment.duration(moment(arrivalDate).diff(moment(departureDate))),
      duringD = during.days(),
      duringH = during.hours(),
      duringM = during.minutes(),
      duringStr = (duringD ? duringD + 'd' : '') + (duringH ? duringH + 'h' : '') + (duringM ? duringM + 'm' : '');
    !totalTax && (totalTax = airportFee + fuelFee); // 机建燃油费
    const content = (
      <div>
        <p>{messages('zx.flight.price')/*机票价*/}: {ticketPrice}</p>
        <p>{messages('zx.flight.fee')/*机建+燃油费*/}: {totalTax}</p>
        <p>{messages('zx.service.fee')/*服务费*/}: {supplierServiceFee}</p>
      </div>
    );
    return (
      <div className="middle-info">
        <div className="info-col infos">
          <div className="line-name">{airlineName}{flightNo}</div>
          <div className="line-info">{airlineInfos}</div>
        </div>
        <div className="info-col airline">
          <div className="airline-col airport" style={{textAlign: 'right'}}>
            <div className="font-600">{moment(departureDate).format('HH:mm')}</div>
            <div className="terminal">{departureAirportName}{departureTerminal || ''}</div>
          </div>
          <div className="airline-col airimg">
            <img src={trafficLineImg} style={{maxWidth: '80%', position: 'absolute', top: '50%', left: '10%'}}/>
            <div className="during-str">{duringStr}</div>
          </div>
          <div className="airline-col airport" style={{textAlign: 'left'}}>
            <div className="font-600">{moment(arrivalDate).format('HH:mm')}</div>
            <div className="terminal">{arrivalAirportName}{arrivalTerminal || ''}</div>
          </div>
        </div>
        {withTax && <div className="info-col" style={{textAlign: 'right'}}>
          <div className="price-wrapper colored">CNY <span className="price">{moneyStr}</span></div>
          <div className="price-tax">
            <span>{messages('financial-management.key586')/*含税总价*/}</span>&nbsp;
            <Popover placement="topRight" content={content} trigger="click">
              <span className="detail-info" onClick={() => this.showDetailInfo()}>{messages('budget.key2')/*明细*/}</span>
            </Popover>
          </div>
        </div>}
        {!withTax && <div className="info-col" style={{textAlign: 'right'}}>
          <div className="price-wrapper">CNY <span className="price">{priceStr}</span>{messages('zx.from.min')/*起*/}</div>
          <div>
            <span className="price-tax">{messages('zx.price.no.tax')/*不含税价*/}</span>
          </div>
        </div>}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { language: state.main.language };
}

export default connect(mapStateToProps)(ZxTicketInfo);
